<template>
    <div style="background-color: #fff;">
      <main-layout>
        <el-form ref="ruleFormRef" :model="formdata" label-width="80px" size="small">
            <el-form-item label="标题" prop="title">
                <el-input v-model="formdata.title" placeholder="请输入消息标题" style="width: 500px;"/>
            </el-form-item>

            <el-form-item label="发送范围" prop="">
              <div style="display: flex;">
                <div style="flex: 1;">
                  <area-select @change="getArea" width="433px" v-model="area"/>
                </div>
                <div style="padding: 0 0 0 10px;">
                  <el-button type="success" class="myBtn" plain @click="addSelect">添加</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="" prop="tableData">
              <div>
                <div class="addtips">提示：选择消息发送覆盖的范围，按省、市、区来覆盖，例只选择省代表该消息发送至该省下的所有农场。</div>
                <table class="itemTableBox" style="width:500px;min-width:500px;margin:10px 0;">
                    <tr>
                        <th width="30" style="text-align: center">序号</th>
                        <th>省</th>
                        <th>市</th>
                        <th>区</th>
                        <th width="50" style="text-align: center">操作</th>
                    </tr>
                    <tr v-for="(dt,index) in tableData" :key="index">
                        <td style="text-align: center">{{index + 1}}</td>
                        <td>{{dt.province}}</td>
                        <td>{{dt.city}}</td>
                        <td>{{dt.area}}</td>
                        <td>
                            <div class="tbItemFlex">
                                <el-icon color="#f82e2e" :size="20" @click="tableData.splice(index,1)"><Remove /></el-icon>
                            </div>
                        </td>
                    </tr>
                </table>
              </div>
          </el-form-item>
            <el-form-item label="消息内容" prop="content">
                <wang-editor v-if="!notifyId || (notifyId && formdata.content)" v-model="formdata.content"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
              <el-button @click="close">取消</el-button>
            </el-form-item>
        </el-form>
      </main-layout>
  
    </div>
  </template>
  
  <script setup>
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, reactive,watch, onActivated,onMounted} from 'vue'
  import{useRouter,useRoute} from "vue-router"

  import {addNotify,addNotifyDetail,editNotify} from '@/api/system'

  import { useUserStore } from '@/pinia/modules/user'
  import { emitter } from '@/utils/bus.js'
  import mainLayout from '@/components/custom/mainLayout.vue'
  import areaSelect from '@/components/custom/areaSelect.vue'
  import wangEditor from '@/components/custom/wangEditor.vue'
  import { message } from '@/utils/element'
 

  const router = useRouter()
  const route = useRouter()
  const userStore = useUserStore()
  
  const notifyId = ref('')
  const formdata = ref({})
  const ruleFormRef = ref(null)
  const tableData = ref([])
  const curSelectItem = ref('')
  const area = ref([])
  
  onMounted(async ()=>{
  
    notifyId.value = route.currentRoute.value.query.id
    if(notifyId.value){
      document.title = '编辑消息-种植生产管理智能决策系统'
      const res = await addNotifyDetail(notifyId.value)
      if(res.code == 0 || res.success){
        tableData.value = JSON.parse(res.data.notifyArea || '[]')
        formdata.value.title = res.data.title
        formdata.value.content = res.data.content
      }else{
        message('获取数据出错了',3)
      }
    }
  })
  

  const save = async ()=>{
    if(!formdata.value.title){
      return message('请输入标题',3)
    }else if(!tableData.value || tableData.value.length<1){
      return message('请选择发送区域',3)
    }else if(!formdata.value.content){
      return message('请输入消息内容',3)
    }
    const params = {
      title:formdata.value.title,
      content:formdata.value.content,
      notifyArea:JSON.stringify(tableData.value)
    }
    let res = {}
    if(notifyId.value){
      res = await editNotify({...params,notifyId:notifyId.value})
    }else{
      res= await addNotify(params)
    }
    if(res.code ==0){
      message('数据提交成功',2)
      close()  // 关闭当前页
      emitter.emit('reload') // 刷新页面
    }
  }
  
  const getArea = (obj)=>{
    console.log("选择区域:",obj)
    curSelectItem.value = obj
  }

  const addSelect = ()=>{
    if(!curSelectItem.value){
      return message('请选择区域',3)
    }
    //console.log("选择：",detail)
    tableData.value = [...tableData.value,curSelectItem.value]
    curSelectItem.value = {}
    area.value = []
  }
  
  const close = ()=>{
    emitter.emit('closeThisPage')
  }
  
  </script>
  
  <style lang="scss" scoped>

    .itemTableBox{
      width: 100%;
      min-width: 1150px;
      border: 1px solid #ebeef5;
      border-collapse:collapse ;
      th,td{
          text-align: left; 
          span{
              color: #f70808;
          }
      }
      th{
          background-color: #f5f7fa;
          height: 30px;
          padding: 0 8px;
          &+th{
              border-left: 1px solid #ebeef5;
          }
      }
      td{
          text-align: left;
          padding:6px 8px;
          border-top: 1px solid #ebeef5;
          &+td{
              border-left: 1px solid #ebeef5;   
          }
          
      }
      .tbItemFlex{
          display: flex;
          align-items: center;
          justify-content: center;
          .el-icon{
              cursor: pointer;
              &:hover{

              }
          }
      }
  }
  </style>
  